import React, { useEffect, useState } from "react"
//components
// import UserInfo from "../../components/userinfo"
import { Grid, Card, Image, Space, Button, Popup } from 'antd-mobile'
import { RightOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { codeLogin } from '@/utils/codeLogin.js'
import dayjs from 'dayjs';
import api from '@/api/iap/index'
import EmptyBlock from '@/components/emptyBlock'
import './index.css'


export default function Home() {

    const navigate = useNavigate()
    const toGoodsList = (actId) => {
        navigate(`goodsList?id=${actId}`)
    }
    const [selectedBrand, setSelectedBrand] = useState('-1')
    const [brandList, setBrandList] = useState([])
    const [activeList, setActiveList] = useState([])

    const [popupVisible, setPopupVisible] = useState(false);

    //选择品牌
    const changeBrand = (id) => {
        if (id == selectedBrand) return
        setSelectedBrand(id)
        getAct(id)
    }

    //获取活动
    const getAct = async (id) => {
        let res = await api.activity_by_id({ brandIds: id })
        setActiveList(res.data)
    }

    //初始化页面
    const initPage = async () => {
        let res = await api.brand_list()
        setBrandList(res.data || [])
        getAct('')
        setSelectedBrand('-1')
    }

    useEffect(() => {
        initPage()
    }, [])

    return (
        <div className="home-warp" >
            <Card title='选择品牌' style={{ marginBottom: '5px', position: 'relative' }}>
                <Button color='primary' fill='none' size='small' style={{ position: 'absolute', left: '50%', top: '10px', transform: 'translateX(-50%)' }}
                    onClick={() => { setPopupVisible(true) }}>集团规则</Button>
                <Button color='primary' fill='none' size='small' style={{ position: 'absolute', right: '10px', top: '10px' }}
                    onClick={() => { initPage() }}>全部</Button>
                {
                    brandList.length > 0 ?
                        <Grid columns={4} gap={8}>
                            {brandList.map(item => (
                                <Grid.Item
                                    key={item.id}
                                    style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }}
                                    onClick={() => changeBrand(item.id)}
                                >
                                    <Image
                                        style={{
                                            borderRadius: '15px', border: selectedBrand === item.id ? '2px solid #1677ff' : '2px solid #eee', transition: 'border 0.2s'
                                        }}
                                        src={item.logPic}
                                        width={75}
                                        height={75}
                                        fit='fill'
                                    />
                                </Grid.Item>
                            )
                            )
                            }
                        </Grid> : <div >暂无品牌开启内购</div>
                }


            </Card>
            <Card title='选择活动' >
                {activeList.length > 0 ? activeList.map(item => (
                    <div className="act-name-warp" key={item.id} onClick={() => { toGoodsList(item.id) }} style={{ background: item.activityBgPicAddr ? `url(${item.activityBgPicAddr})` : `linear-gradient(to right, rgba(87, 150, 245, 0.4), rgba(255, 255, 255, 0.4))` }}>
                        <div className="act-name-left">
                            <div style={{ fontSize: '15px', fontWeight: '700' }}> {item.activityName}</div>
                            <div style={{ fontSize: '12px', color: 'gray', }}> {dayjs(item.activityBeginTime).format('YYYY-MM-DD')} -  {dayjs(item.activityEndTime).format('YYYY-MM-DD')} </div>
                        </div>
                        <RightOutline fontSize={12} />
                    </div>
                )) : <EmptyBlock title="暂无活动" />}
            </Card>

            <Popup visible={popupVisible} onMaskClick={() => { setPopupVisible(false) }} onClose={() => { setPopupVisible(false) }} position='top' bodyStyle={{ overflow: 'auto', height: '70vh', maxHeight: '60vh' }}>
                这是集团规则  <br />
                这是集团规则  <br />
                这是集团规则  <br />
                这是集团规则  <br />
                这是集团规则  <br />
                这是集团规则  <br />
                这是集团规则  <br />
            </Popup>
        </div>
    );
}
